<template>
  <table-page
    :current="currentPage"
    :page-size="pageSize"
    :total="total"
    show-header
    show-collapse
  >
    <template v-slot:header>
      <div class="flex flex-align-center">
        <span class="font-12 nowrap mr-10">姓名</span>
        <el-input class="mr-10" style="max-width: 200px;" clearable></el-input>
        <el-button icon="el-icon-search">筛选</el-button>
      </div>
    </template>
    <template v-slot:table="{ tableHeight }">
      <el-table :data="list" :max-height="tableHeight" header-row-class-name="el-table-header" border>
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
        <el-table-column label="班级" prop="className"></el-table-column>
      </el-table>
    </template>
  </table-page>
</template>

<script>
export default {
  name: 'List',
  data () {
    return {
      total: 40,
      currentPage: 1,
      pageSize: 20,
      list: []
    }
  },
  created () {
    for (let i = 0; i < 40; i++) {
      this.list.push({
        id: i,
        name: `学生${i}`,
        age: 10 + i,
        className: '三年二班'
      })
    }
  }
}
</script>

<style scoped>

</style>
